import React, { memo, useState } from 'react'
import { NavLink } from 'react-router-dom';
import { NavBarWrapper } from "./style";

export default memo(function NavBar() {
  const [dicoverMenu] = useState([
    {
      title: '推荐',
      link: '/discover/recommend',
    },
    {
      title: '排行榜',
      link: '/discover/ranking',
    },
    {
      title: '歌手',
      link: '/discover/artist',
    },
    {
      title: '歌单',
      link: '/discover/songs',
    },
  ])

  return (
    <NavBarWrapper>
      {
        dicoverMenu.map((item) => {
          return <NavLink key={item.title} to={item.link} activeClassName="menu-active">{item.title}</NavLink>
        })
      }
    </NavBarWrapper>
  )
})
